<template>
  <el-dialog title="设置分档" v-model="openCard" :width="is_pc == true ? '800px' : '95%'" append-to-body
             @close="cancel" :close-on-click-modal="false">
    <el-form ref="formPowRef" :model="formPow" :rules="rulesPow" label-width="120px">
      <el-form-item label="设备号" prop="sn">
        <span>{{ formPow.sn }}</span>
      </el-form-item>
      <el-card class="mt10" v-for="(item, key) in formPow.gradePows" :key="key">
        <template #header>
          <div class="flex_cont">
            <span>第{{ key + 1 }}档</span>
            <el-button @click="delStep(key)" type="danger" icon="Delete" circle
                       v-if="formPow.gradePows.length > 1"/>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额(元)" prop="amount">
              <el-input-number :min="0.01" :precision="2" v-model="item.amount"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间(分钟)" prop="time">
              <el-input-number :min="1" :precision="0" v-model="item.time"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功率(瓦)" prop="pow">
              <el-input-number :min="1" :precision="0" v-model="item.pow"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-button type="primary" class="mt10" @click="addStep" v-if="formPow.gradePows.length < 4">
        <span>新增档位</span>
      </el-button>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {getDevPow, setDevPow} from "@/api/equipment/dev";
import {ElLoading} from "element-plus";

const {proxy} = getCurrentInstance();
const openCard = ref(false);
const formPow = ref({
  sn: null,
  gradePows: [{
    amount: null,
    time: null,
    pow: null,
  }]
})

const rulesPow = ref({
  sn: [{required: true, message: "设备号不能为空", trigger: "blur"}]
})

const is_pc = ref(false)// 判断PC端 or 手机端

function getCollapse() {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    is_pc.value = false;
  } else {
    is_pc.value = true;
  }
}

function open(sn) {
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在读取",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getDevPow(sn).then((response) => {
    loadingInstance.close();
    openCard.value = true;
    let gradePows = []
    for (let i = 0; i < response.data.length; i++) {
      let grade_item = {
        amount: response.data[i].amount / 100,
        time: response.data[i].time,
        pow: response.data[i].pow,
      }
      gradePows.push(grade_item)
    }
    formPow.value.gradePows = gradePows
    formPow.value.sn = sn
  }).catch((error) => {
    loadingInstance.close();
  });
}

// 暴露出去
defineExpose({
  open,
})

function cancel() {
  openCard.value = false;
  reset();
}

function reset() {
  formPow.value = {
    sn: null,
    gradePows: [{
      amount: null,
      time: null,
      pow: null,
    }]
  };
  proxy.resetForm("formPowRef");
}

function delStep(index) {
  formPow.value.gradePows.splice(index, 1)
}


function addStep() {
  formPow.value.gradePows.push({
    amount: null,
    time: null,
    pow: null,
  })
}

function submitForm() {
  proxy.$refs["formPowRef"].validate((valid) => {
    if (valid) {
      let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在设置",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let gradePows = []
      for (let i = 0; i < formPow.value.gradePows.length; i++) {
        let grade_item = {
          amount: formPow.value.gradePows[i].amount * 100,
          time: formPow.value.gradePows[i].time,
          pow: formPow.value.gradePows[i].pow,
        }
        gradePows.push(grade_item)
      }
      setDevPow({
        sn: formPow.value.sn,
        gradePows: gradePows
      })
        .then((response) => {
          loadingInstance.close();
          if (response.code == 0) {
            proxy.$modal.notifySuccess("设置成功");
            cancel();
            if (reload.value) reload();
          }
        })
        .catch((error) => {
          loadingInstance.close();
        });
    }
  });
}

getCollapse();
// 页面宽度变化时
window.onresize = () => {
  this.getCollapse();
};


</script>

<style lang="scss" scoped>
.unit {
  margin-left: 10px;
}

.mt10 {
  margin-top: 10px;
}

.flex_cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
